<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>记录详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./js/template-web.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <style>
        label {
            width: 200px;
            margin-left: 100px;
            margin-right: 100px;
            font-size: 18px;
            font-weight: 700;
        }

        .time {
            width: 200px;
            margin-left: 30px;
            margin-right: 60px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .img {
            text-align: center;
            width: 100px;
            height: 100%;
        }

        .content {
            text-align: center;
            width: 200px;
            height: 100%;
            margin-right: 100px;
        }

        .form {
            display: flex;
            width: 700px;
            height:100%;
            margin-top: 10px;
            border: 1px solid rgb(210, 210, 210);
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form" id="form">
                <label>时间编号</label>
                <label>内容</label>
                <label>图片</label>
            </form>
        </div>
    </div>
    <script>
        var url = window.location.href
        var userId = url.slice(url.indexOf('=') + 1)
        $.ajax({
            type: 'get',
            url: 'https://api.lzjlw.top:3030/backstage/persontrace?userId=' + userId,
            success: function (res) {
                console.log(res)
                var result = res.map(function (item) {
                    if (item.imgUrl == 'null') {
                        item.imgUrl = 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=423474926,1801248814&fm=179&app=35&f=PNG?w=518&h=136&s=ADFEEB16D210A1925C7BF2EA0300E03E'
                    }
                    var html = `
                    <div class="form">
                        <div class='time'>`+ item.traceId + `</div>
                        <div class='content'>`+ item.traceContent + `</div>
                        <img class="img" src=`+ item.imgUrl + `>
                    </div>
                    `
                    document.getElementById("form").innerHTML += html
                });
                console.log(result)
            },
            complete: function () {
                console.log('请求完成')
            }
        })
    </script>
</body>

</html>